<template>
  <el-col :span="12"><h2 style="font-size: 30px;">主页</h2></el-col>
  <el-row gutter="20" justify="start">
  </el-row>
  <br>
  <el-row style="height: 100vh">
    <el-col :span="12">
      <div id="majority" style="width: 100vh; height: 100%"></div>
    </el-col>
    <el-col :span="12">
      <div id="city" style="width: 100vh; height: 85%"></div>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import * as echarts from 'echarts';

import {onMounted} from "vue";
import {countByCity, countByMajority} from "@/api/user.ts";
onMounted(() => {

  countByMajority().then(data => {
    var chartDom = document.getElementById('majority');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
      title: {
        text: '各专业人数',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: '50%',
          data: data.data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'

            }
          }
        }
      ],
      itemStyle: {
        color: '#c23531'
      }
    };

    option && myChart.setOption(option);

  })

  countByCity().then(data => {
    type EChartsOption = echarts.EChartsOption;

    var chartDom = document.getElementById('city')!;
    var myChart = echarts.init(chartDom);
    var option: EChartsOption;

    option = {
      title: {
        text: '学生最多的10座城市',
        left: 'center'
      },
      xAxis: {
        type: 'category',
        data: data.city
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: data.number,
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 渐变色方向，从上到下
                [
                  {offset: 0, color: '#1ece85'},    // 渐变色起始颜色
                  {offset: 1, color: '#0073d1'}     // 渐变色结束颜色
                ]
            )
          }
        }
      ]
    };

    option && myChart.setOption(option);

  })
})
</script>

<style scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}


.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>
